<template>
	<div :class="[isMe?'my_msg_item':'msg_item']">
		<div :class="[isMe?'my_avator':'avator']">
			<mu-avatar :size="50">
				<img :src=avatar>
			</mu-avatar>
			<span :class="[isMe?'my_msg_name':'msg_name']">{{name}}</span>
		</div>
		<div :class="[isMe?'my_msg-info':'msg-info']">{{info}}</div>
	</div>
</template>

<script>
export default {
	name: "Infomation",
	props: {
		avatar: String,
		isMe: Boolean,
		name: String,
		info: String
	},
	data() {
		return {}
	}
}
</script>

<style scoped>
	.msg_item {
		height: 90px;
		width: 100%;
		position: relative;
	}
	.avator {
		width: 61px;
		height: 61px;
		position: absolute;
		top: 15px;
		left: -10px;
	}
	.msg_name {
		font-size: 20px;
		position: absolute;
		left: 60px;
		width: 60px;
	}

	.msg-info {
		width: 60%;
		height: 50px;
		text-align: center;
		line-height: 50px;
		font-size: 20px;
		border-radius: 25px;
		white-space: normal;
		word-break: break-all;
		word-wrap: break-word;
		background-color: rgba(192, 192, 192, 0.8);
		position: absolute;
		top: 40px;
		left: 10%;
	}
	/*个人发信息*/
	.my_msg_item {
		height: 90px;
		width: 100%;
		position: relative;
	}
	.my_avator {
		width: 61px;
		height: 61px;
		float: right;
	}
	.my_msg_name {
		font-size: 20px;
		float: right;
		width: 80px;
		margin-top: -45px;
		margin-right: 60px;
	}
	.my_msg-info {
		width: 60%;
		height: 50px;
		text-align: center;
		line-height: 50px;
		font-size: 20px;
		border-radius: 25px;
		white-space: normal;
		word-break: break-all;
		word-wrap: break-word;
		background-color: rgba(214, 239, 236, 0.8);
		position: absolute;
		top: 40px;
		left: 30%;

	}
</style>